<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>逐页加载 PDF</title>
    <style>
        #pdf-viewer {
            width: 100%;
            height: 100vh;
            border: 1px solid #ccc;
            overflow-y: auto;
        }
        .page {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
<div id="pdf-viewer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script>
    // PDF.js 的 worker 文件路径
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.worker.min.js';

    // PDF 文件的 URL（指向你的后端接口）
    // const pdfUrl = 'http://localhost:8181/convert?fileUrl=http://192.168.11.104:9000/bubu/zbc.pptx';
    const pdfUrl = 'http://192.168.11.104:8181/convert?fileUrl=http://192.168.11.104:9000/bubu/184500650.pdf';
    // const pdfUrl = 'http://192.168.11.104:9999/jeecg-system/convert?fileUrl=http://192.168.11.104:9000/bubu/zbc.pptx';

    // 获取 PDF 查看器的容器
    const container = document.getElementById('pdf-viewer');

    // 加载并渲染 PDF
    let currentPage = 1;

    function loadPdfPage(pageNumber) {
        // 为每页生成独立的 URL
        const pageUrl = `${pdfUrl}&page=${pageNumber}`;

        pdfjsLib.getDocument(pageUrl).promise.then(pdf => {
            pdf.getPage(1).then(page => { // 每页 PDF 只包含一页，所以始终获取第 1 页
                const scale = 1.5;
                const viewport = page.getViewport({ scale });

                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                const renderTask = page.render(renderContext);
                renderTask.promise.then(() => {
                    const pageDiv = document.createElement('div');
                    pageDiv.className = 'page';
                    pageDiv.appendChild(canvas);
                    container.appendChild(pageDiv);

                    // 加载下一页
                    currentPage++;
                    // 检查是否还有更多页面
                    if (pdf.numPages > 0) {
                        loadPdfPage(currentPage);
                    }
                });
            });
        }).catch(error => {
            console.error(`加载第 ${pageNumber} 页 PDF 失败:`, error);
        });
    }

    // 开始加载第一页
    loadPdfPage(currentPage);
</script>
</body>
</html>